<template>
	<view class="content">
		<u-swiper :list="list5" @change="e => current = e.current" :autoplay="true" radius="0" height="200">
			<view slot="indicator" class="indicator">
				<view class="indicator__dot" v-for="(item, index) in list5" :key="index"
					:class="[index === current && 'indicator__dot--active']">
				</view>
			</view>
		</u-swiper>
		<view>
			<u-notice-bar :text="news"></u-notice-bar>
		</view>
		<!-- 中部菜单start -->
		<view style="padding: 1rem 0;">
			<u-grid :border="false" @click="click" col="4">
				<u-grid-item v-for="(menuListItem,menuListIndex) in menuList" :key="menuListIndex">
					<u-icon :customStyle="{paddingTop:20+'rpx'}" :name="menuListItem.name" :size="40"></u-icon>
					<text class="grid-text">{{menuListItem.title}}</text>
				</u-grid-item>
			</u-grid>
			<u-toast ref="uToast" />
		</view>
		<!-- 中部菜单end -->



		<!-- 动态start -->
		<view class="u-page">
			<u-cell-group>
				<u-cell title="骑友动态"></u-cell>
			</u-cell-group>
			<view style="margin-bottom:25px">
				<u-row customStyle="margin: 10px">
					<u-col span="6">
						<u-col span="2" style="">
							<u-avatar :src="src"></u-avatar>
						</u-col>
					</u-col>
					<u-col span="6" style="text-align:right">
						<text>#动态</text>
					</u-col>
				</u-row> 
				<view class="album">
					<view class="album__content">
						<u-album :urls="urls2" multipleSize="110"></u-album>
						<u--text margin="10px 0" text="南航俱乐部小程序正式上线啦南航俱乐部小程序正式上线啦南航俱乐部小程序正式上线啦~"></u--text>
					</view>
				</view>
				<u-row customStyle="margin: 0px 10px 10px 10px">
					<u-col span="1.5">
						<u-icon name="thumb-up" size="20" color="" label="30"></u-icon>
					</u-col>
					<u-col span="1.5">
						<u-icon name="chat-fill" size="20" color="" label="106"></u-icon>
					</u-col>
				</u-row>
			</view>

			<view style="margin-bottom:25px">
				<u-row customStyle="margin: 10px">
					<u-col span="6">
						<u-col span="2" style="">
							<u-avatar :src="src"></u-avatar>
						</u-col>
					</u-col>
					<u-col span="6" style="text-align:right">
						<text>#动态</text>
					</u-col>
				</u-row> 
				<view class="album">
					<view class="album__content">
						<u-album :urls="urls2" multipleSize="110"></u-album>
						<u--text margin="10px 0" text="全面的组件和便捷的工具会让您信手拈来，如鱼得水"></u--text>
					</view>
				</view>
				<u-row customStyle="margin: 0px 10px 10px 10px">
					<u-col span="1.5">
						<u-icon name="thumb-up" size="20" color="" label="30"></u-icon>
					</u-col>
					<u-col span="1.5">
						<u-icon name="chat-fill" size="20" color="" label="106"></u-icon>
					</u-col>
				</u-row>
			</view>
			
		</view>
		<!-- 动态end -->


		<!-- <u-tabbar :value="index" @change="name => index = name" :fixed="true" :placeholder="true"
			:safeAreaInsetBottom="true">
			<u-tabbar-item text="首页" icon="home"></u-tabbar-item>
			<u-tabbar-item text="商城" icon="gift"></u-tabbar-item>
			<u-tabbar-item text="知识" icon="zhihu-circle-fill"></u-tabbar-item>
			<u-tabbar-item text="当地" icon="map"></u-tabbar-item>
			<u-tabbar-item text="我的" icon="account"></u-tabbar-item>
		</u-tabbar> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				index: 0,
				current: 0,
				currentNum: 0,
				list5: [
					'/static/images/1.png',
					'/static/images/2.png',
					'/static/images/3.png',
				],
				menuList: [{
						name: '/static/images/icon/store-2.png?t=1',
						title: '商城'
					},
					{
						name: '/static/images/icon/active.png',
						title: '活动'
					},
					{
						name: '/static/images/icon/line.png?t=1',
						title: '路线'
					},
					{
						name: '/static/images/icon/qixing.png?t=1',
						title: '车店'
					},
				],
				news: '南航俱乐部小程序正式上线啦~',

				urls2: [
					'/static/images/album/1.jpg',
					'/static/images/album/2.jpg',
					'/static/images/album/3.jpg',
					'/static/images/album/4.jpg',
					'/static/images/album/5.jpg',
					'/static/images/album/6.jpg'
				],
			}
		},
		onLoad() {

		},
		methods: {
			change(e) {
				// console.log('change', e);
			},
			click(e) {
				uni.setStorageSync('menuidex', e-1);
				//console.log('click', e);
				if(e==0){
					uni.switchTab({url:'/pages/shop/index'})
				}
				if(e==1){ 
					uni.switchTab({url:'/pages/local/index'})
				}
				if(e==2){
					uni.switchTab({url:'/pages/local/index'})
				}
				if(e==3){
					uni.switchTab({url:'/pages/local/index'})
				}
			}
		},
	}
</script>


<style lang="scss">
	@import 'index.scss';

	.indicator {
		@include flex(row);
		justify-content: center;

		&__dot {
			height: 6px;
			width: 6px;
			border-radius: 100px;
			background-color: rgba(255, 255, 255, 0.35);
			margin: 0 5px;
			transition: background-color 0.3s;

			&--active {
				background-color: #ffffff;
			}
		}
	}

	.indicator-num {
		padding: 2px 0;
		background-color: rgba(0, 0, 0, 0.35);
		border-radius: 100px;
		width: 35px;
		@include flex;
		justify-content: center;

		&__text {
			color: #FFFFFF;
			font-size: 12px;
		}
	}
</style>